<template>
  <div>
    <div class="loading" v-if="!songs">数据加载中…</div>
    <div id="result" v-if="songs">
    <div class="title">搜索 {{ keyword }}</div>
    <div class="fenlei">
      <ul>
        <li
          v-for="(l, index) of lists"
          :key="index"
          @click="changeStatus(index)"
          :style="setItem(index)"
        >
          {{ l }}
        </li>
      </ul>
    </div>
    <div class="show">
      <div class="show-content" v-show="i == 0">
        <!-- <button>播放全部</button> -->
        <div class="table">
          <ul>
            <li>
              <span id="index"></span>
              <span id="name">音乐标题</span>
              <span id="author">歌手</span>
              <span id="album">专辑</span>
              <span id="time">时长</span>
            </li>
            <li v-for="(s, index) of songs" :key="index" @dblclick="playmusic(s.id)">
              <span id="index">{{ index + 1 }}</span>
              <span id="name">{{ s.name }}</span>
              <span id="author">{{ s.ar[0].name }}</span>
              <span id="album">{{ s.al.name }}</span>
              <span id="time">{{ s.dt }}</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="show-content" id="gedan" v-show="i == 1">
        <ul>
          <li v-for="(p,index) of playlists" :key="index" @click="tolisting(p.id)">
            <span>
              <img
                :src="p.coverImgUrl"
                alt=""
              />
            </span>
            <span>{{p.name}}</span>
            <span>{{p.trackCount}}首</span>
            <span>by {{p.creator.nickname}}</span>
            <span>{{p.playCount}}</span>
          </li>
        </ul>
      </div>
      <div class="show-content" id="yonghu" v-show="i == 2">
        <ul>
          <li v-for="(u,index) of users" :key="index" @click="touser(u.userId)">
            <span>
              <img :src="u.avatarUrl" alt="">
            </span>
            <span>{{u.nickname}}</span>
            <span v-show="u.authStatus">网易音乐人</span>
            <span v-show="!u.authStatus">{{u.signature}}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
import axios from "axios";
import { mapState } from "vuex";
export default {
  name: "SearchResult",
  data() {
    return {
      songs: [],
      playlists:[],
      users:[],
      lists: ["单曲", "歌单", "用户"],
      i: 0,
    };
  },
  computed: {
    ...mapState("songAbout", ["index", "singinglist"]),
    keyword() {
      return this.$route.query.keyword;
    },
  },
  watch: {
    keyword: {
      immediate: true,
      handler(value) {
        axios
          .get(
            "http://localhost:8013/api/cloudsearch?keywords=" +
              value +
              "&type=1"
          )
          .then((res) => {
            this.songs = res.data.result.songs;
          });
        
        axios
          .get(
            "http://localhost:8013/api/cloudsearch?keywords=" +
              value +
              "&type=1000"
          )
          .then((res) => {
            this.playlists = res.data.result.playlists
          });

        axios
          .get(
            "http://localhost:8013/api/cloudsearch?keywords=" +
              value +
              "&type=1002"
          )
          .then((res) => {
            this.users = res.data.result.userprofiles
            console.log(this.users);
          });
      },
    },
  },
  methods: {
    changeStatus(index) {
      this.i = index;
    },
    setItem(index) {
      var style = {};
      if (index == this.i) {
        style.borderBottom = "3px solid #286acb";    //底部边框颜色
      }
      return style;
    },
    playmusic(id){
      //遍历当前播放列表数组，查看点击的歌曲是否存在当前歌单
      let result = this.singinglist.findIndex((item) => {
        return item.id === id;
      });
      if (result == -1) {
        //当前播放列表不包含该歌曲,则添加到当前列表
        axios
          .get("http://localhost:8013/api/song/detail?ids=" + id)
          .then((res) => {
            this.singinglist.splice(this.index + 1, 0, res.data.songs[0]);
            this.$store.dispatch("songAbout/playsongid", this.index + 1);
          });
      } else {
        //当前播放列表包含该歌曲
        this.$store.dispatch("songAbout/playsongid", result);
      }
    },
    tolisting(id){
      this.$bus.$emit("ToListing",id)
    },
    touser(id){
      this.$bus.$emit("routeToUserProfile",id);
    }
  },
  mounted() {},
};
</script>

<style scoped>
#result {
  padding: 8px 20px 80px;
  text-align: left;
  line-height: 18px;
}
#result .title {
  height: 40px;
  line-height: 40px;
  /* background: aquamarine; */
  font-size: 19px;
  font-weight: 600;
}
#result .fenlei li {
  float: left;
  height: 50px;
  line-height: 70px;
  text-align: center;
  width: 40px;
  /* background: blueviolet; */
  margin: 0 10px;
}
#result .fenlei li:nth-child(1) {
}
.show {
  margin-top: 60px;
}
.show .show-content {
}
.show .show-content button {
  background: steelblue;
  text-align: center;
  border-radius: 20px;
  width: 110px;
  height: 30px;
  line-height: 30px;
  color: #fff;
  outline: none;
  border: none;
  margin: 5px 0px 10px;
}
.show-content .table ul li {
  height: 40px;
  line-height: 40px;
}
.show-content .table ul li:nth-of-type(even) {
  background: #f0f0f0;
}
.show-content .table li span {
  display: inline-block;
  padding: 0 10px;
  font-size: 14px;
  height: 40px;
  overflow: hidden;
}
#index {
  width: 5%;
}
#name {
  width: 30%;
}
#author {
  width: 19%;
}
#album {
  width: 25%;
}
#time {
  width: 8%;
}
#gedan li {
  height: 80px;
  line-height: 80px;
}
#gedan li:nth-of-type(even){
  background: #f0f0f0;
}
#gedan li img {
  width: 100%;
}
#gedan li span {
  display: inline-block;
  padding: 0 5px;
  height: 80px;
  line-height: 80px;
  overflow: hidden;
}
#gedan li span:nth-child(1) {
  width: 70px;
  float: left;
}
#gedan li span:nth-child(1) img {
  width: 60px;
  height: 60px;
  margin: 10px 0 0 5px;
  border-radius: 10px;
}
#gedan li span:nth-child(2) {
  width: 39%;
}
#gedan li span:nth-child(3) {
  width: 10%;
  font-size: 13px;
  color: #888;
}
#gedan li span:nth-child(4) {
  width: 27%;
  font-size: 13px;
  color: #888;
}
#gedan li span:nth-child(5) {
  width: 9%;
  font-size: 13px;
  color: #888;
}

#yonghu li {
  height: 85px;
  line-height: 85px;
}
#yonghu li:nth-of-type(even){
  background: #f0f0f0;
}
#yonghu li span {
  display: inline-block;
  height: 85px;
  line-height: 85px;
  overflow: hidden;
}
#yonghu li span:nth-child(1){
  width: 60px;
  float: left;
  height: 60px;
  border-radius: 50%;
  margin: 12px 15px;
}
#yonghu li span img {
  width: 100%;
  overflow: hidden;
}
#yonghu li span:nth-child(3),
#yonghu li span:nth-child(4){
  float: right;
  margin-right: 50px;
  font-size: 14px;
  color: #888;
}
</style>